/* color palette from <https://github.com/vuejs/theme> */
html,body{
  height: 100%;
  width: 100%;
}
.box-main{
  background: #F3F6F7;
  padding: 0 24px;
}
img {
  margin: 0;
  padding: 0;
}
.books-mine {
  background: #fff;
  padding: 0 24px;
}
.d-flex {
  display: flex;
  flex-direction: row;
}
.flex1{
  flex: 1;
}
.d-flex-wrap {
  flex-wrap: wrap;
}

.d-flex-nowrap {
  flex-wrap: nowrap;
}

.d-col-center {
  align-items: center;
}

.d-col-top {
  align-items: flex-start;
}

.d-col-bottom {
  align-items: flex-end;
}

.d-row-center {
  justify-content: center;
}

.d-row-left {
  justify-content: flex-start;
}

.d-row-right {
  justify-content: flex-end;
}

.d-row-between {
  justify-content: space-between;
}

.d-row-around {
  justify-content: space-around;
}

.d-text-left {
  text-align: left;
}

.d-text-center {
  text-align: center;
}

.d-text-right {
  text-align: right;
}

.d-flex-col {
  display: flex;
  flex-direction: column;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f20 {
  font-size: 20px;
}
.f24 {
  font-size: 24px;
}
.f28 {
  font-size: 28px;
}
.f32 {
  font-size: 32px;
}
.f34 {
  font-size: 34px;
}
.fbold {
  font-weight: bold;
}
.f36 {
  font-size: 36px;
}
.f40 {
  font-size: 40px;
}
.h100{
  height: 100px;
}
.h75{
  height:75px;
}
.p15{
  padding: 15px;
}
.pl15{
  padding-left: 15px;
}
.pl20{
  padding-left: 20px;
}
.pt15{
  padding-top: 15px;
}
.mr15 {
  margin-right: 15px;
}
.mr40 {
  margin-right: 40px;
}
.mr10 {
  margin-right: 10px;
}

.mt15 {
  margin-top: 15px;
}
.mb24 {
  margin-bottom: 24px;
}
.mb15 {
  margin-bottom: 15px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml8 {
  margin-left: 8px;
}
.mr8 {
  margin-right: 8px;
}
.mb10 {
  margin-bottom: 10px;
}
.mt10 {
  margin-top: 10px;
}
.mb4 {
  margin-bottom: 4px;
}
.mt4 {
  margin-top: 4px;
}
.mb6 {
  margin-bottom: 6px;
}
.mt6 {
  margin-top: 6px;
}
.color-b {
  color: #4098f9;
}
.line-12 {
  line-height: 12px;
}
.col-block {
  color: #252626;
}
.background-b {
  background-color: #1e7bfe;
}
.color-h {
  color: #9b9da0;
}
.color-r {
  color: #de361f;
}
.set-select {
  color: #03a366 !important;
  border: 1px solid #03a366 !important;
}
.set-select2 {
  color: #4098f9 !important;
  border: 1px solid #4098f9 !important;
}

.indent2 {
  text-indent: 2em;
}
.btn-box {
  padding: 12px 0;
  border-radius: 8px;
  border: 1px solid #ececec;
  color: #252626;
  font-size: 14px;
}

:root {
  --van-nav-bar-background: #f3f6f7;
  --van-nav-bar-arrow-size: 20px;
  --van-padding-md: 24px;
  --van-background-2: #eceef1;
  --van-padding-base: 0px;
  --van-padding-xs: 0px;
  --van-padding-lg: 0px;
  --van-padding-xl: 0px;
  --van-tabs-card-height:42px;
}
.settings-box .van-cell {
  background-color: #fff;
}
.settings-box .van-cell.van-field {
  background-color: #f7f9fc;
  border-radius: 10px;
}
.settings-box .speed-box input[type="text"] {
  color: #4098f9;
}
.settings-list .van-tabs__nav--card{
  border:0!important;
  margin: 0;
  background-color: #F7F9FC;
}
.settings-list .van-tab--card {
  border:1px solid #fff!important;
  color: #9B9DA0;
  margin-right: 5px;
  border-radius: 4px;
  background-color: #fff;
}
.settings-list .van-tab--card.van-tab--active{
  border:1px solid #03a366!important;
  background-color: #fff;
  color: #03a366;
}
.books-mine .van-nav-bar,
.books-mine .van-tabs__nav {
  background-color: #fff !important;
}
.van-nav-bar .van-icon,
.van-nav-bar__text {
  color: #272636;
}
/* 定义名为 "zoom" 的动画效果 */
.zoom-enter-active {
  animation: zoomInOut 0.5s;
}
.zoom-leave-active {
  animation: zoomInOut2 0.5s;
}
.anima-shake {
  animation: bounce-down 0.4s ease infinite;
}
@keyframes bounce-down {
  0% { transform: rotateZ(0); }
  25% { transform: rotateZ(2deg); }
  50% { transform: rotateZ(0); }
  75% { transform: rotateZ(-2deg); }
  100% { transform: rotateZ(0); }
}
@keyframes zoomInOut {
  0% {
    transform: scale(0); /* 初始状态时缩小到无限小 */
  }
  100% {
    transform: scale(1); /* 最后状态时还原成正常大小 */
  }
}
@keyframes zoomInOut2 {
  0% {
    transform: scale(1); /* 初始状态时缩小到无限小 */
  }
  100% {
    transform: scale(0); /* 最后状态时还原成正常大小 */
  }
}
/* .van-search__field {
    background-color: #ECEEF1;
} */
.van-field {
  border-radius: 50px;
}
.chapter-mine-d .van-nav-bar__content {
  height: 80px;
}
.exam-mine .van-picker {
  background-color: #fff !important;
}
.settings-box .van-tabs__nav--line {
  background-color: #fff !important;
}
.settings-box .van-cell-group--inset {
  margin: 0 !important;
}
/* .van-tabs__nav{
  background-color: #F3F6F7;
} */
.van-tab__text--ellipsis {
  overflow: visible;
}
.van-field {
  padding: 8px 16px;
}
.first-tab .van-tab {
  margin-right: 20px;
}
.exam-mine .van-ellipsis,
.chapter-mine .van-ellipsis {
  overflow: visible;
}
.second-tab .van-tab {
  justify-content: flex-start;
  flex: none;
  margin-right: 56px;
}
.sort-tabs .van-tab--card {
  border-radius: 13px 13px 13px 13px;
  border: 1px solid #e7ecf3;
  color: #9b9da0;
  margin-right: 20px;
  width: 70px;
  height: 30px;
  flex: none;
}
.sort-tabs .van-tabs__nav--card {
  border: 0;
}
.exam-mine .van-nav-bar,
.chapter-mine .van-nav-bar {
  background-color: transparent !important;
}
.sort-tabs .van-tab--card.van-tab--active {
  color: #4098f9;
  background: rgba(64, 152, 249, 0.2);
  font-weight: 300;
}
.ipad-pc-b1 {
  display: none;
}
.ipad-pc-b2 {
  display: block;
}
.h-800-b1 {
  display: none;
}
.h-800-b2 {
  display: block;
}
.h-1200-b1 {
  display: none;
}
.h-1200-b2 {
  display: block;
}
.ipad-b1 {
  display: none;
}
.ipad-b2 {
  display: block;
}
.m-b1 {
  display: none;
}
.m-b2 {
  display: block;
}
.pc-b1 {
  display: none;
}
.pc-b2 {
  display: block;
}
.pc-settings {
  width: 80px;
}
.pc-settings img {
  width: 22px;
  height: 22px;
  margin-left: 12px;
}
.left-img {
  width: 20px;
  height: 20px;
  object-fit: cover;
}
/* @media screen and (min-width:768px) and (max-width:1024px){
  .ipad-display{
    display: block;
  }
} */
@media only screen and (min-device-width: 800px) {
  /* .h-800-b2 {
    display: none;
  } */
  .h-800-b1 {
    display: block;
  }
}
/* ipad横屏 */
@media only screen and (min-device-width: 800px) and (max-device-width: 1180px) {
  #app {
    background-color: #f7f9fc;
  }
  :root {
    --van-background-2: #ffffff;
    --van-nav-bar-background: transparent;
  }
  .settings-box .van-cell {
    background-color: transparent !important;
    color: #fff;
  }
  .settings-box .van-cell-group {
    background-color: transparent !important;
    color: #fff;
  }
  .settings-box .settings-cont,
  .settings-box .settings-cont-b,
  .settings-box .speed-box,
  .settings-box .bochu-box,
  .settings-box .zhezhu-box2 {
    background-color: transparent !important;
    color: #fff;
  }
  .set-select,
  .set-select2 {
    color: #fff !important;
    background: #294b69 !important;
    border: 1px solid #ffffff !important;
  }
  .ml8 {
    color: #fff !important;
  }
  .pc-main {
    width: 800px;
    margin: 0 auto;
  }
  .van-tabs__nav {
    background-color: transparent !important;
  }
  /* STYLES */
  .ipad-b1,
  .ipad-pc-b1 {
    display: block;
  }
  .ipad-b2,
  .ipad-pc-b2 {
    display: none;
  }
}
/* ipad竖屏 */
@media only screen and (min-device-width: 1180px) and (max-device-width: 1400px) {
  :root {
    --van-background-2: #ffffff;
    --van-nav-bar-background: transparent;
  }
  .settings-box .van-cell {
    background-color: transparent !important;
    color: #fff;
  }
  .settings-box .van-cell-group {
    background-color: transparent !important;
    color: #fff;
  }
  .settings-box .settings-cont,
  .settings-box .settings-cont-b,
  .settings-box .speed-box,
  .settings-box .bochu-box,
  .settings-box .zhezhu-box2 {
    background-color: transparent !important;
    color: #fff;
  }
  .set-select,
  .set-select2 {
    color: #fff !important;
    background: #294b69 !important;
    border: 1px solid #ffffff !important;
  }
  .ml8 {
    color: #fff !important;
  }
  .h-1200-b2 {
    display: none;
  }
  .h-1200-b1 {
    display: block;
  }
  .van-tabs__nav {
    background-color: transparent !important;
  }
  #app {
    background-color: #f7f9fc;
  }
  /* STYLES */
  .ipad-b1,
  .ipad-pc-b1 {
    display: block;
  }
  .ipad-b2,
  .ipad-pc-b2 {
    display: none;
  }
}
/*PC*/
@media screen and (min-width: 1400px) {
  :root {
    --van-background-2: #ffffff;
    --van-nav-bar-background: transparent;
  }
  .chapter-mine-d .van-nav-bar__content {
    border-bottom: 2px solid #f0f3f7;
  }
  .main {
    background-image: url("../assets/img/pc/background-img.png");
    background-size: 957px 728px;
    background-repeat: no-repeat;
  }
  .main.answer-mine {
    background-image: url("../assets/img/pc/pc-bg2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .h-1200-b2 {
    display: none;
  }
  .h-1200-b1 {
    display: block;
  }
  #app {
    background-color: #ffffff;
  }
  .pc-main {
    width: 1200px;
    margin: 0 auto;
  }
  .ipad-pc-b1 {
    display: block;
  }
  .ipad-pc-b2 {
    display: none;
  }
  .van-tabs__nav {
    background-color: transparent !important;
  }
  .pc-b1 {
    display: block;
  }
  .pc-b2 {
    display: none !important;
  }
  .left-img {
    width: 24px;
    height: 24px;
    object-fit: cover;
  }
}
